import React from 'react';
// laoding 组件, 为了优化用户体验, 
import { Spin } from 'antd'
import styled from 'styled-components';
import Pts from 'prop-types';
const Loading = (props) => {
    return (
        <Main>
            <Spin size='large' spinning={props.spinning} tip={props.tip}></Spin>
        </Main>
    );
}

// 给该组件设置一些默认的属性, 可以接收父传子的属性, 来修改这些默认属性
Loading.defaultProps = {
    spinning: true,
    tip: '加载中...'
}

// 对参数类型进行校验
Loading.propTypes = {
    spinning: Pts.bool,
    tip: Pts.string
}

// 使用cssinjs 技术
const Main = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
`

export default Loading;